<template>
  <div class="header">
    <div class="head_logo"><img src="/static/images/logo@2x.png" alt=""><span>业财税融合大数据审计技能竞赛平台</span>
	
      <div class="user" @click="showInfo()" v-if="userInfo.id">
        <p>{{userInfo.name}} <i></i></p>
      </div>
	  <el-button  v-show="$route.path!=='/teacher'" style="padding-left: 0px; float: right; margin-right: 30px; margin-top: 15px; " @click="goBack">
		  <img src="../../../static/images/return.png" style="width: 16px;height: 15px; margin-right: 10px;">
		  返回上一级
		  </el-button>
    </div>
    <div class="user_info" v-show="isShowInfo" v-if="userInfo.id">
      <div class="info_txt">
        <p>手机号/账号</p>
        <div>{{userInfo.mobilePhone}}</div>
      </div>
      <div class="info_txt">
        <p>院校</p>
        <div>{{userInfo.schoolName}}</div>
      </div>
      <div class="info_txt">
        <p>专业</p>
        <div>会计</div>
      </div>
      <div class="info_txt">
        <p>我的团队号</p>
        <div><span>10</span><a href="javascript:;">我的团队</a></div>
      </div>
      <div class="info_btn" @click="loginOut">退出登录</div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from "vuex";
  // import CloudSystem from '@/router/cloudSystem.js'
  export default {
    provide() {
      return {
        reload: this.reload,
      };
    },
    name: "projectDetails",
    data() {
      return {
        isShowInfo:false,
        // collapseLost: CloudSystem,
        tableData: []
      };
    },
    mounted() {},
    components: {
      // commonHeader,
      // asideNav,tags
    },
    computed: {
      ...mapGetters({
        dynamicTags: ["dynamicTags"],
        userInfo: ["userInfo"],
        // personalDetails: ["personalDetails"],
      }),
    },
    created() {
      console.log('assets')
    },
	mounted() {
		console.log(this.$route.path)
	},
    methods: {
      goBack(){
        this.$router.push('/teacher')
      },
      showInfo(){
        this.isShowInfo = !this.isShowInfo;
      },
      loginOut() {
        // console.log(this,this.$confirm);
        // return;
        this.$confirm("您确定要退出登录吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
              this.$store.commit(this.$types.LOGINOUT);
          })
          .catch(err => console.log(err));
      },
    },
    watch: {

    }
  };
</script>

<style lang="less" scoped="scoped">
  .header {
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: #212844;
    box-shadow: 0px 0px 10px 0px #E5E9EF;

    .user_info {
      width: 206px;
      height: 322px;
      background: #212844;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 2px;
      position: absolute;
      z-index: 100;
      right: 10px;
      top: 80px;
      padding: 19px;
      padding-top: 0;
      box-sizing: border-box;

      &::before {
        content: "";
        width: 0px;
        /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-bottom: 8px solid #212844;
        border-left: 8px solid transparent;
        /*transparent 表示透明*/
        border-right: 8px solid transparent;
        position: absolute;
        top: -8px;
        right: 10px;
      }
      .info_btn{
        width: 80px;
        height: 28px;
        background: #338AFF;
        border-radius: 4px;
        text-align: center;
        line-height: 28px;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 14px;
        color: #fff;
      }
      .info_txt {
        line-height: 20px;
        color: #fff;
        padding-bottom: 10px;
        margin-top: 12px;
        border-bottom: 1px solid #54596F;

        p {
          color: #888C9B;
          font-size: 12px;
        }

        div {
          font-size: 14px;
          overflow: hidden;
          span{
            float: left;
          }
          a{
            float: right;
            color: #338AFF;
            text-decoration: underline;
          }
        }
      }
    }

    .head_logo {
      img {
        width: 28px;
        height: 28px;
        margin-right: 10px;
        vertical-align: middle;
        position: relative;
        top: -2px;
        margin-left: 20px;
      }

      span {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
      }
      .user{
        float: right;
        color: #fff;
        padding-right: 22px;
        cursor: pointer;
        i{
          display: inline-block;
          border-top: 8px solid #fff;
          border-left: 8px solid transparent;
          /*transparent 表示透明*/
          border-right: 8px solid transparent;
        }
      }
    }
  }
</style>
